<template>
	<!-- 积分list -->
	<view>
		<u-navbar title="积分明细" :autoBack="true" :placeholder="true"></u-navbar>
		<view class="minBox">
			<view class="topimg">
				<view style="position: absolute;font-size: 28rpx;width: 100%;padding-top: 40rpx;">
					<view style="display: flex;justify-content: center;align-items: center;font-weight: 700;">
						我的积分
						<view class="iconfont icon-credit1" style="width: 40rpx;height: 40rpx;margin-left: 15rpx;"></view>
					</view>
					<view style="text-align: center;font-size: 80rpx;margin-top: 20rpx;">
						{{score}}
					</view>
				</view>
				<image :src="img" mode="" style="width: 100%;height:240rpx ;"></image>
			</view>
			<view class="boxs" v-if="detailedList.length >= 1"
				style="padding: 40rpx 30rpx 100rpx;background-color:rgba(246, 246, 246);border-radius: 40rpx;margin-top: 20rpx;">
				<view class="box" v-for="item in detailedList" :key="item.id">
					<view class="titleBox">
						<view class="topBox">
							<view class="title">{{item.memo}}</view>
						</view>
						<view class="time">{{$u.timeFormat(item.createtime, 'yyyy年mm月dd日')}}</view>
					</view>
					<view class="money " :class="minus(item.after,item.before)?'':'black'">
						{{item.score}}
						<view class="iconfont icon-credit1"></view>
					</view>
				</view>
			</view>
			<view v-else style="text-align: center;color: #e3e3e3;font-size: 28rpx;margin-top: 30rpx;">
				暂无积分记录
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detailedList: [{
					memo: '签到',
					id: 1,
					name: '受邀人成功下单',
					type: 1,
					score: 20
				}],
				img: null,
				score: 0,
			};
		},
		async onLoad() {
			this.getScoreDetail()
			// let res6 = await this.$api.Geticon({
			// 	type: 'miliimg'
			// })
			// this.img = res6.data[0].image
		},
		methods: {
			// 获取积分列表
			async getScoreDetail() {
				let res = await this.$api.getScoreDetail()
				this.detailedList = res.data.data
				this.score = res.data.total
			},
			minus(a, b) {
				return Number(a) - Number(b) > 0 ? true : false
			}
		}
	}
</script>

<style lang="scss">
	.topimg {
		position: relative;
	}

	.u-navbar__content__title {
		color: rgba(0, 0, 0, 0.8);
		font-size: 32rpx;
		font-weight: 700;
	}

	.boxs {
		.box:nth-of-type(n+2) {
			margin-top: 20rpx;

		}
	}

	page {
		background: #fff;
		color: #333;
	}

	.minBox {
		padding: 22rpx;

		.box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			padding-bottom: 34rpx;
			border-bottom: 2rpx solid #eee;

			.titleBox {
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.topBox {
					display: flex;
					align-items: center;
					margin-bottom: 8rpx;

					.title {
						color: rgba(0, 0, 0, 0.9);
						font-size: 28rpx;
						font-weight: 800;
					}

					.status {
						margin-left: 6rpx;
						padding: 4rpx 24rpx;
						border-radius: 96rpx;
						color: rgba(128, 110, 254, 1);
						font-size: 24rpx;
						background: rgba(243, 241, 255, 1);
					}
				}

				.time {
					color: rgba(0, 0, 0, 0.26);
					font-size: 24rpx;

					text {
						margin-left: 4rpx;
					}
				}
			}

			.money {
				color: rgba(0, 0, 0, 1.0);
				font-size: 32rpx;
				display: flex;
				align-items: center;

				.icon-credit1 {
					width: 30rpx;
					height: 30rpx;
					margin-left: 10rpx;
				}
			}

			.black {
				display: flex;
				align-items: center;
				// color: rgba(0, 0, 0, 0.8);
				font-size: 32rpx;
			}
		}
	}
</style>